<template>
  <div style="height: calc(100vh - var(--nav-height))">
    <div>
      <div class="title">
        <h1>User</h1>
        <el-button type="primary" class="add" @click="addView = true">Add</el-button>
      </div>
      <div class="search">
        <el-input v-model="serachValue" placeholder="Search" class="input">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <el-table :data="searchList" style="width: 100%" height="calc(100% - 118px)">
      <el-table-column prop="_id" label="UserId" align="center"></el-table-column>
      <el-table-column prop="name" label="Name" align="center"></el-table-column>
      <el-table-column label="Action" align="center">
        <i slot-scope="scope" class="el-icon-delete del" @click="del(scope.row._id)"></i>
      </el-table-column>
    </el-table>
    <el-dialog title="新增用户" :visible.sync="addView">
      <el-form label-width="80px">
        <el-form-item label="用户id">
          <el-input v-model="userId"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="name"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" ref="submit" class="submit" :warn="warn" @click="add" slot="footer">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
module.exports = {
  data: function () {
    return {
      list: [],
      loading: true,
      serachValue: '',
      addView: false,
      userId: '',
      name: '',
      warn: '',
    };
  },
  methods: {
    async add() {
      if (!this.userId) {
        this.warn = '请输入用户id！';
        return;
      }
      if (!this.name) {
        this.warn = '请输入用户名！';
        return;
      }
      this.warn = '';
      const { data } = await axios.put('/user/add', {
        _id: this.userId,
        name: this.name,
      });
      if (data.success) {
        this.$message.success('添加成功！');
        this.userId = '';
        this.name = '';
        this.addView = false;
        this.getUser();
      }
    },
    async getUser() {
      this.loading = true;
      const { data } = await axios.get("/user/get");
      this.list = data.list;
      this.loading = false;
    },
    async del(_id) {
      await this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });
      const { data } = await axios.delete('/user/del', { params: { _id } });
      if (data.success) {
        this.$message.success('已删除！');
        this.getUser();
      }
    },
  },
  computed: {
    searchList() {
      return this.list.filter((item) => {
        const reg = new RegExp(this.serachValue, 'i');
        return reg.test(item._id) || reg.test(item.name);
      });
    }
  },
  mounted() {
    this.getUser();  
  },
};
</script>

<style scoped>

.title {
  display: flex;
  justify-content: space-between;
}

.title h1 {
  margin: 10px 0 0 0;
  padding-bottom: 2px;
}

.add {
  font-size: 13px;
  padding: 3px 25px;
  height: 35px;
  align-self: flex-end;
  margin-bottom: 3px;
}

.el-dialog__body {
  padding: 30px 20px 0;
}

.search {
  border-top: 1px solid #dce0e6;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  background-color: #f7f8fa;
  align-items: center;
}

.input {
  width: 220px;
}

.del {
  line-height: 24px;
  margin-right: 15px;
  height: 24px;
  width: 24px;
  text-align: center;
  margin-top: 13px;
  color: #898989;
  transition: .3s;
  cursor: pointer;
}

.del:hover {
  background: #ccc;
}

.submit:after {
  content: attr(warn);
  position: absolute;
  left: 45px;
  color: var(--warn);
  bottom: 60px;
}

</style>